<template>
    <!--面包屑-->
    <div style="margin-bottom: 30px">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/Main' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>
                <router-link to="/TireUsageRecordShow">轮胎使用记录管理</router-link>
            </el-breadcrumb-item>
            <el-breadcrumb-item>轮胎使用记录添加</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <el-form :model="form" label-width="auto" style="max-width: 600px" ref="ruleFormRef" :rules="rules">
        <el-form-item label="车牌号:" style="width: 600px;" prop="licensePlateNumber">
            <el-select v-model="form.licensePlateNumber" placeholder="请输入车牌号" clearable>
                <el-option v-for="item in licensePlateNumberlist" :label="item" :value="item" :key="item" />
            </el-select>
        </el-form-item>
        <el-form-item label="轮胎品牌:" prop="tireBrand">
            <el-input v-model="form.tireBrand" placeholder="请输入轮胎品牌" />
        </el-form-item>
        <el-form-item label="规格:" prop="specifications">
            <el-input v-model="form.specifications" placeholder="请输入规格" />
        </el-form-item>
        <el-form-item label="数量:" prop="number">
            <el-input-number v-model="form.number" :min="1" :max="100000000000"  />
        </el-form-item>
        <el-form-item label="使用人:" prop="user">
            <el-input v-model="form.user" placeholder="请输入使用人" />
        </el-form-item>
        <el-form-item label="使用日期:" prop="usedDate">
                <el-date-picker v-model="form.usedDate" value-forma="YYYY-MM-DD" type="date" placeholder="请选择使用日期"
                    style="width: 100%" />
        </el-form-item>
        <el-form-item label="备注:">
            <el-input v-model="form.notes" type="textarea" placeholder="请输入备注信息" />
        </el-form-item>
        <el-form-item style="margin-left: 20%;">
            <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
            <el-button @click="router.push('TireUsageRecordShow')">取消</el-button>
        </el-form-item>
    </el-form>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
const router = useRouter()
const route = useRoute()
const show1 = ref(false)
const form = reactive({
    createdBy: "张三",  // 创建人   
    createdDate: new Date(),    // 创建日期
    updatedBy: "张三",  // 更新人
    updatedDate: new Date(),     // 更新日期
    // deletedBy: "",  // 删除人
    // deletedDate: "",    // 删除日期
    isDeleted: false,        // 是否删除  
    tireUsageRecordId: 0,        // 轮胎使用记录ID
    companyID: "",          //公司ID
    user_Id: 0,           // 用户ID
    licensePlateNumber: "",  // 车牌号
    tireBrand: "",  // 轮胎品牌
    specifications: "",  // 规格
    number: '',  // 数量
    user: "",    // 使用人
    usedDate: "",  // 使用日期
    notes: ""   // 备注
})

//表单校验
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules>({
    tireBrand: [
        { required: true, message: '轮胎品牌不能为空', trigger: 'blur' },
    ],
    licensePlateNumber: [
        { required: true, message: '车牌号不能为空', trigger: 'blur' },
    ],
    specifications: [
        { required: true, message: '规格不能为空', trigger: 'blur' },
    ],
    number: [
        { required: true, message: '数量不能为空', trigger: 'blur' },
    ],
    user: [
        { required: true, message: '使用人不能为空', trigger: 'blur' },
    ],
    usedDate: [
        { required: true, message: '使用日期不能为空', trigger: 'blur' },
    ],
})
//添加
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {

            axios.post('/carwrite/api/TireUsageRecord/Create', form)
                .then(res => {
                    if (res.data.code == 0) {
                        ElMessage.success('添加成功');
                        router.push('TireUsageRecordShow')
                    }
                })
                .catch(err => {
                    console.log(err);
                })
        } else {
            console.log('error submit!', fields)
        }
    })
}

//获取车牌号
const licensePlateNumberlist= ref([])
const showNumber=()=>{
    axios.get("/carread/api/Main/GetCar")
    .then(res=>{
        licensePlateNumberlist.value=res.data.data.map((x:any)=>x.plateNumber)
        console.log(licensePlateNumberlist.value);
    })
    .catch(err=>{
      console.log(err);  
    })
}

onMounted(() => {
    showNumber();
})
</script>